<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>电影中心</title>
    <%- include common %>
    <style>
        a{  
            color:inherit;
            text-decoration: none;
        }
        .mv-item{
            
            margin-top:20px;
            box-sizing: border-box;
            padding:0 10px;
        }
        .search {
                margin-top: 5px;
                background: #fff;
                border-radius: 16px 16px 0 0;
            }

            .search .search_form {
                line-height: 1;
                width: 318px;
                height: 28px;
                background: #f0f0f0;
                border: 1px solid #f0f0f0;
                border-radius: 15px;
                position: relative;
            }

            .search .search_form input {
                border: 0;
                color: #3a3a3a;
                width: 285px;
                text-indent: 15px;
                height: 30px;
                line-height: 30px;
                background: transparent;
                outline: none;
            }

            .search .search_form span {
                cursor: pointer;
            }
            
    </style>
</head>
<body>
    <%- include('head',{title:'comment',username:username })%>
    <div class="container">
        <h2 class="text-success" >所有的电影评论</h2>

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3" style="padding-bottom:10px;">
                    <select data-page="<%- page %>" name="" id="myselect" class="form-control" >
                        <option value="10" <%- pageSize=='10' ? 'selected':'' %> >每页10条</option>
                        <option value="20" <%- pageSize=='20' ? 'selected':'' %> >每页20条</option>
                        <option value="30" <%- pageSize=='30' ? 'selected':'' %> >每页30条</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <table class="text-center col-md-12 table table-striped table-bordered table-hover table-condensed">
                        <thead>
                            <tr>
                                <td>序号</td>
                                <td>评论人</td>
                                <td>评论电影</td>
                                <td>评论标题</td>
                                <td>评论内容</td>
                                <td>评论时间</td>
                                <td>操作</td>
                                <td>操作</td>
                            </tr>
                        </thead>
                        <tbody  style="width:120px;"  >
                    <%    if(result.length>0){   %>
                            <%    result.forEach((item,i)=>{   %>
                                    <tr class="<%- item.username == username ?'is_mine':'' %>">
                                        <td><%- i+1 %></td>
                                        <td class="text-danger h4">
                                            <a href="/comment/mycomment?myname=<%- item.username %>">
                                                <%- item.username %>
                                            </a>
                                        </td>
                                        <td class="text-success ">
                                            <a href="/comment/moviecomment?mid=<%- item.mid %>"><%- item.movie.title  %></a>
                                        </td>
                                        <td class="col-md-2" >
                                            <p style="width:120px;white-space: normal;word-break:break-all;word-wrap: break-word; ">
                                                <a href="/comment/onecomment?_id=<%-item._id%>">
                                                    <%- item.title  %>
                                                </a>
                                            </p>
                                        </td>
                                        <td >
                                            <div style="width:300px;white-space: normal;word-break:break-all;word-wrap: break-word; ">
                                                <%- item.content  %>
                                            </div>
                                        </td>
                                        <td class="table-time"><%- item.time  %></td>
                                        <td> 
                                        <%    if(item.username==username){  %>
                                                <button  data-item='<%- JSON.stringify(item) %>'  onclick="updateone(this)"  data-toggle="modal" data-target="#updatebox"  class="btn btn-primary">修改</button>
                                        <%   }   %>
                                        </td>
                                        <td>
                                            <button onclick="deleteone('<%- item._id %>')" data-toggle="modal" data-target="#deletebox" class="btn btn-danger "  <%- item.username==username?'':'disabled' %>  >删除</button>
                                        </td>
                                    </tr>   
                            <%   })   %>
                                    <tr>
                                        <td colspan="8">
                                            <nav aria-label="Page navigation">
                                                <ul class="pagination">
                                                    <li class="<%- page-1<1 ? 'disabled':'' %>">
                                                    <a href="/comment/mlist?page=<%- page-1 %>&pageSize=<%- pageSize %>" aria-label="Previous">
                                                        <span aria-hidden="true">&laquo;</span>
                                                    </a>
                                                    </li>
                                                    <%  if(page - 2 >= 1){  %>
                                                        <li><a href="/comment/mlist?page=<%- page-2 %>&pageSize=<%- pageSize %>" ><%- page - 2 %></a></li>
                                                    <%   }  %>
                                                    
                                                    <%  if(page - 1 >= 1){  %>
                                                        <li><a href="/comment/mlist?page=<%- page-1 %>&pageSize=<%- pageSize %>"><%- page - 1 %></a></li>
                                                    <%   }  %>
                                                   
                                                    <li class="active"><a href="/comment/mlist?page=<%- page %>&pageSize=<%- pageSize %>"> <%- page %>  </a></li>
                                                    <%  if(page + 1 <= totalPage ){  %>
                                                        <li ><a href="/comment/mlist?page=<%- page+1  %>&pageSize=<%- pageSize %>"><%- page + 1 %></a></li>
                                                    <%   }  %>
                                                    <%  if(page + 2 <= totalPage ){  %>
                                                        <li><a href="/comment/mlist?page=<%- page+2   %>&pageSize=<%- pageSize %>"><%- page + 2 %> </a></li>
                                                    <%   }  %>
                                                    <li class="<%- page+1>totalPage ? 'disabled':'' %>" >
                                                    <a href="/comment/mlist?page=<%- page+1  %>&pageSize=<%- pageSize %>" aria-label="Next">
                                                        <span aria-hidden="true">&raquo;</span>
                                                    </a>
                                                    </li>
                                                </ul>
                                            </nav>
                                            <p>
                                                <span>
                                                    第 <%- page %> 页 / 共 <%- totalPage%>  页
                                                </span>
                                                <span>
                                                    每页 <%- pageSize%> 条  / 共 <%- total %> 条数据
                                                </span>
                                            </p>
                                        </td>
                                    </tr>
                    <%    }else{  %>
                            <tr>
                                <td colspan="8" >
                                    <p class="text-center text-danger h5">暂无数据,请去插入数据评论</p>
                                </td>
                            </tr>
                    <%    }   %>
                       
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade"  tabindex="-1" role="dialog" id="deletebox">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">删除提示</h4>
            </div>
            <div class="modal-body">
                <p class="text-danger" >你真的确定要删除这条评论吗?</p>     
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger"  onclick="confirmDel()"  >确定删除</button>
            </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <div class="modal fade"  tabindex="-1" role="dialog" id="updatebox">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">修改评论</h4>
            </div>
            <div class="modal-body">
                <form      >
                    <div class="form-group">
                        <label for="title">标题</label>
                        <input type="text"    name="title" class="form-control" id="title" placeholder="Title">
                    </div>
                    <div class="form-group">
                        <label for="content">内容</label>
                        <textarea class="form-control"  name="content" id="content" cols="30" rows="10" placeholder="Content"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger"  onclick="confirmUpdate()"  >确定修改</button>
            </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <script>


        $("#myselect").on("change",function(){
            console.log($(this).val())
            var pageSize = $(this).val()
            var page = $(this).attr('data-page');
            window.location.href = '/comment/mlist?page='+page + "&pageSize="+pageSize;
        })


        $.each($(".table-time"),function(_,item){
            var date = new Date($(item).text()*1);
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            $(item).text(year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds);
        })


        var delid = null;
        var itemone = null;
        function deleteone(_id){
            delid = _id ;   // 内部修改  
        }
        
        function confirmDel(){
            console.log(delid)
            $.ajax({
                url:"/comment/removeone",
                type:"get",
                data:{
                    _id:delid
                },
                success:res=>{
                    if(res.code==200){
                        $("#deletebox").modal('toggle')
                        window.location.reload()
                    }
                }
            })
        }

        function updateone(that){
            // console.log(id,title,content);
            console.log()
            itemone = JSON.parse($(that).attr('data-item'))
            
            $("#title").val(itemone.title)
            $("#content").val(itemone.content)
        }

        function confirmUpdate(){
            $.ajax({
                url:"/comment/updateone",
                type:"POST",
                data:{
                    _id:itemone._id,
                    title: $("#title").val(),
                    content: $("#content").val()
                },
                success:res=>{
                    if(res.code==200){
                        $("#updatebox").modal('toggle')
                        window.location.reload()
                    }
                }
            })
        }
    </script>
</body>
</html>